<template>
    <div style="wrapper">
        <div class="x-content">
            <div class="x-order-content align-center">
                    <div class="x-flex1 align-center x-order-dai">
                        <div>
                            <text class="iconfont x-order-icon" style="font-size:48px;top:3px;">&#xe601;</text>
                        </div>
                        <text :class="['x-order-text',isIos()?'':'x-android-top']" style="top:2px;">订单支付</text>
                    </div>
                    <div class="x-flex1 align-center x-order-dai">
                        <div>
                            <text class="iconfont x-order-icon" style="font-size:59px;top:3px;">&#xe61f;</text>
                        </div>
                            <text :class="['x-order-text',isIos()?'':'x-android-top']" style="top:-5px;">现金卡充值</text>
                    </div>
                    <div class="x-flex1 align-center x-order-dai">
                        <div>
                            <text class="iconfont x-order-icon" style="font-size:48px;top:5px;">&#xe61e;</text>
                        </div>
                        <text :class="['x-order-text',isIos()?'':'x-android-top']" style="top:2px;">产品养护</text>
                    </div>
                </div>
                <div class="x-order-content align-center">
                    <div class="x-flex1 align-center x-order-dai">
                        <div>
                            <text class="iconfont x-order-icon" style="font-size:50px;top:3px;">&#xe627;</text>
                        </div>
                        <text :class="['x-order-text',isIos()?'':'x-android-top']">企业简介</text>
                    </div>
                    <div class="x-flex1 align-center x-order-dai">
                        <div>
                            <text class="iconfont x-order-icon" :style="isIos()?{fontSize:46,top:3}:{fontSize:46,top:0}">&#xe618;</text>
                        </div>
                            <text :class="['x-order-text',isIos()?'':'x-android-top']" style="top:2px;">兑换商城</text>
                    </div>
                    <div class="x-flex1 align-center x-order-dai">
                        <div>
                            <text class="iconfont x-order-icon" :style="isIos()?{fontSize:53,top:5}:{fontSize:53,top:0}">&#xe620;</text>
                        </div>
                        <text :class="['x-order-text',isIos()?'':'x-android-top']" style="top:-3px;">到店体验</text>
                    </div>
                </div>
        </div>
    </div>
</template>
<style scoped>
.wrapper {
    
}
.x-content {
    background-color: #fff;
    padding-top: 20px;
    padding-bottom: 20px;
}
.iconfont {
  font-family: iconfont;
}
.align-center {
    align-items: center;
    justify-content: center;
}
.x-flex1 {
    flex: 1;
}
/*我的订单部分*/
.x-order-div {
    margin-top: -80px;
    background-color: #fff;
    border-radius: 10px;
    width: 700px;
    height: 240px;
}
.x-order-title {
    flex-direction: row;
    height: 80px;
    justify-content: center;
    align-items: center;
    padding-left:20px;
    padding-right: 20px;
    border-bottom-color: #c1c1c1;
    border-bottom-width: 1px;
}
.x-order-title:active {
    background-color: #eee;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.x-order-textleft {
    flex: 1;
    text-align: left;
    font-size: 30px;
    color: #222126;
}
.x-order-textright {
    flex: 1;
    text-align: right;
    font-size: 25px;
    color: #69696b;
}
.x-order-content {
    flex-direction: row;
    height: 140px;
}
.x-order-icon {
    font-size: 50px;
    color: #d8b36c;
}
.x-order-text {
    color: #222126;
    font-size: 28px;
}
.x-android-top {
    padding-top: 18px;
}
.x-order-dai {
    height: 160px;
}
.x-order-dai:active {
    background-color:#eee; 
}
</style>
<script>
export default {
  data() {
    return {
    };
  },
  methods: {
    isIos () {
        const { platform } = weex.config.env;
        return platform.toLowerCase() === 'ios';
    }
  }
};
</script>